<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多层组件通信 </title>
</head>
<body>
<!--巴巴爸爸爸爸给儿子传值-->
<div id="app">
    <my-parent :title="title" :imgsrc="img"></my-parent>

</div>

<!--组件注册-->
<!--child1-->
<template id="my_title">
    <h1>{{title}}</h1>
</template>

<!--child2-->
<template id="my_img">
    <img :src= imgsrc width="200px" alt="">
</template>


<template id="my_parent">
   <div>
       <child1 :title="title"></child1>
       <child2 :imgsrc ="imgsrc"></child2>
   </div>
</template>

<script src="js/vue.js"></script>
<script>

    <!--组件实例化-->
    /*child  实例化*/
    let Child1 = Vue.extend({
        template:'#my_title',
       props:['title']
    });
    let Child2 = Vue.extend({
        template:'#my_img',
        props:['imgsrc']
    });
    
    /*parent 注册 */

    Vue.component('my-parent', {
        props: ['title', 'imgsrc'],
        components: {
            'child1': Child1,
            'child2': Child2
        },
        template: '#my_parent'
    });
    
    
    new Vue({
        el:"#app",
        data:{
            title:'我是不是很可爱',
            img:'1.jpg'
        }
    });
    
</script>
</body>
</html>